<template>
  <div>
    <el-card shadow="always">
      <div slot="header">
        <span style="font-size: 20px; font-weight: bold;" class="center">热门博客</span>
      </div>
      <div class="search">
        <label class="search-wrap">
          <el-input v-model="keywords" placeholder="输入关键字搜索" style="margin-right: 10px"
                    @keyup.enter.native="onSubmit"></el-input>
          <span class="search-icon" @click="onSubmit">
            <i class="fa fa-search"></i>
          </span>
        </label>

      </div>
      <div v-for="(activity, index) in activities"
           :key="index">
        <i class="number">{{index+1}}</i>
        <el-link @click.native="showBlog(activity)" :underline="false">
          <router-link to="/blog/showBlog" tag="span">
            <span>{{activity.title}}</span>
          </router-link>
        </el-link>
      </div>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "HotBlog",
  data(){
    return{
      activities: [],
      keywords:'',
      searchUrl:''
    }
  },
  methods:{
    onSubmit() {
      this.$router.push({path:'/blog/search',query:{keyword:this.keywords, type:'keyword'}});
    },
    getBlog(){
      this.axios.post('/blog/queryTopTen').then((response)=>{

        for (let i = 0; i < response.data.length; i++) {
          let labels = response.data[i].blogLabel.split(',');
          let blogs = {
            bid:'',
            title: '',
            author: '',
            createTime: '',
            updateTime: '',
            blogLabel: [],
            blogType: '',
            reads: 0,
            likeNum: 0,
            article: '',
            editType: 1,
            commentsNum:0,
          };
          for (let j = 0; j < labels.length; j++) {
            blogs.blogLabel.push(labels[j]);
          }
          blogs.bid = response.data[i].bid;
          blogs.title = response.data[i].title;
          blogs.blogType = response.data[i].blogType;
          blogs.createTime = response.data[i].createTime;
          blogs.updateTime = response.data[i].updateTime;
          blogs.reads = response.data[i].reads;
          blogs.likeNum = response.data[i].likeNum;
          blogs.article = response.data[i].article;
          blogs.editType = response.data[i].editorType;

          this.axios.post("/user/queryUserById",qs.stringify({
            id:response.data[i].uid
          })).then((response)=>{
            blogs.author = response.data.username;
          })

          this.axios.post("/blog/countCommentsNum",qs.stringify({
            bid:response.data[i].bid
          })).then((response)=>{
            blogs.commentsNum = response.data;
          })
          this.activities.push(blogs);
        }
      })
    },
    showBlog(blog) {
      this.$store.commit('setBlog', blog);
      sessionStorage.setItem("blogDetail",JSON.stringify(blog));
    },
  },
  mounted() {
    this.getBlog();
    sessionStorage.removeItem("keyword");
  }
}
</script>

<style scoped>
.number{
  font-size: 14px;
  color: #437dff;
  font-weight: 700;
  padding: 0 5px 0 0;
  display: block;
  float: left;
  width: 25px;
}
.center {
  display: block;
  text-align: center;
}

.search {
  position: relative;
  padding-bottom: 20px;
}
.search-wrap {
  display: block;
  height: 40px;
  padding: 0 10px;
  background-color: #fff;
  position: relative;
  z-index: 5;
  border: none;
  line-height: 40px;
  box-shadow: none;
}
>>> .el-input__inner{
  padding-right: 25px;
}
.search-icon {
  font-size: 18px;
  position: absolute;
  text-align: center;
  right: 15px;
  bottom: 2px;
  cursor: pointer;
}
.search-icon i{
  font-size: 14px;
  color: #437dff;
  font-weight: 700;
  padding: 0 5px 0 0;
}
.el-link{
  margin: 3px 0;
}
</style>
